<template>
    <div class="sign-in-record">
        <h2>签到记录</h2>
        <div v-if="signInRecords.length > 0">
            <table>
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>签到状态</th>
                        <th>获得积分</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="record in signInRecords" :key="record.signInTime">
                        <td>{{ record.subjectId }}</td>
                        <td :class="{ 'signed-in': record.status === 'present', 'not-signed-in': record.status !== 'present' }">
                            {{ record.status === 'present' ? '已签到' : '未签到' }}
                        </td>
                        <td>{{ record.point }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div v-else>
            <p>暂无签到记录</p>
        </div>

        <h3>签到得分统计</h3>
        <p>总得分：{{ totalScore }}</p>

        <h3>未签到记录</h3>
        <div v-if="missedRecords.length > 0">
            <ul>
                <li v-for="record in missedRecords" :key="record.signInTime" class="not-signed-in">{{ record.subjectId }}</li>
            </ul>
        </div>
        <div v-else>
            <p>没有未签到的记录</p>
        </div>
    </div>
</template>

<script>
import { getSignIns } from '@/utils/urlManager';
import axios from 'axios';

export default {
    name: 'SignInRecord',
    data() {
        return {
            signInRecords: [],
        };
    },
    mounted(){
        this.getSignInLog();
    },
    methods:{
        getSignInLog(){
            axios.get(getSignIns)
            .then((response)=>{
                if (response.data.data != null) {
                    this.signInRecords = response.data.data;
                    for (let index = 0; index < this.signInRecords.length; index++) {
                        let point_index = this.signInRecords[index].point;
                        if(this.signInRecords[index].status == "present"){
                            this.signInRecords[index].point = 10
                        }else{
                            this.signInRecords[index].point = 0
                        }
                    }
                }
            })
            .catch((err)=>{
                console.error(err);
                this.$message.error(err);   
            })
        }
    },
    computed: {
        totalScore() {
            return this.signInRecords.reduce((total, record) => total + record.point, 0);
        },
        missedRecords() {
            return this.signInRecords.filter(record => record.status !== 'present');
        },
    },
};
</script>

<style scoped>
.sign-in-record {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th,
td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.signed-in {
    color: green;
}

.not-signed-in {
    color: red; /* 未签到的记录字体颜色为红色 */
}

h2,
h3 {
    margin: 20px 0 10px;
}

p {
    margin: 10px 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    margin: 5px 0;
}
</style>